<template>
  <div class="mylist">
    <div>
      <MyRated />
      <MyMovies @get-data-end="addBs" :num="num" @refresh="refresh" />
    </div>
  </div>
</template>

<script>
import MyRated from "./MyRated.vue";
import MyMovies from "./MyMovies.vue";
import BScroll from "better-scroll";

let bs;
export default {
  data() {
    return {
      num: 1,
    };
  },
  components: {
    MyRated,
    MyMovies,
  },
  methods: {
    addBs() {
      bs = new BScroll(".mylist", {
        scrollX: false,
        scrollY: true,
        click: true,
        // 允许我i们做上拉加载了
        pullUpLoad: true,
      });
      // 监听pullingUp表示已经拉到底了
      bs.on("pullingUp", () => {
        console.log("已经拉到底了");
        this.num++;
      });
    },
    refresh(finish) {
      // 用于重新计算高度
      bs.refresh();
      if (!finish) {
        // 已经做好了下一次上拉的准备
        bs.finishPullUp();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mylist {
  position: fixed;
  left: 0;
  right: 0;
  top: 156px;
  bottom: 50px;
  overflow: hidden;
}
</style>
